<!-- 云诺 https://app.witframe.com/market/list/index?uid=24 -->
<template>
	<view class="timeaxis">
		<view class="timeaxisItem" v-for="(item,index) in lists" :key="index">
				<view class="timeItem">
					<view class="leftTime">
						{{item.tYear}}
					</view>
					<view class="line">
						<view class="out" :style="{background: color == '' ? '' : color}">
							<view class="inner" :style="{background: color == '' ? '' : color}"></view>
						</view>
					</view>
					<view class="rightContent">
						<view class="tripItem" @tap="gotoDetail(item._id)">
						    <view class="title">{{item.tName}}</view>
						    <view class="tips">{{item.tDesc}}</view>
						</view>
					</view>
				</view>
				
			</view>
	</view>
</template>

<script>
	export default {
		name:"yn-timeaxis",
		props: {
			lists:{
				type:Array
			}
		},
		data() {
			return {
			}
		},
		mounted(){
		},
		methods: {
			gotoDetail: function(id) {
				//console.log(id);
				uni.navigateTo({
					url: '/pages/course/detail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.timeaxis {
		padding: 20rpx;
	}
	.timeaxisItem {
			
			.timeItem {
				display: flex;
				.leftTime {
					width: 135rpx;
					padding: 0 10rpx;
					font-size:28rpx;
					font-family:"Arial","Microsoft YaHei","黑体","宋体",SimSun,FangSong,SimHei,KaiTi,sans-serif;
					font-weight:500;
					color:rgba(51,51,51,1);
					margin-right: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-top: 20rpx;
				}
				.line {
					width: 1px;
					background:rgba(204,204,204,1);
					position: relative;
					.out {
						position: absolute;
						top: 0;
						left: 50%;
						transform: translateX(-50%);
						display: flex;
						justify-content: center;
						align-items: center;
						width: 28rpx;
						height: 28rpx;
						background : rgba(45,150,255,0.6);
						border-radius: 50%;
						margin-top: 40rpx;
						.inner {
							width: 18rpx;
							height: 18rpx;
							background : rgba(45,150,255,1);
							border-radius: 50%;
						}
					}
				}
				.rightContent {
					flex: 1;
					padding: 0 10rpx 40rpx;
					margin-left: 20rpx;
					min-height: 140rpx;
					
					.tripItem {
					        min-height:140rpx;
					        padding: 20rpx 30rpx;
					        box-sizing: border-box;
					        background:rgba(255,255,255,1);
					        box-shadow:0px 0px 20px 0px rgba(0,0,0,0.08);
					        border-radius:10px;
					        margin-bottom: 30rpx;
					        .title {
					            font-size:28rpx;
					            font-family:"Arial","Microsoft YaHei","黑体","宋体",SimSun,FangSong,SimHei,KaiTi,sans-serif;
					            font-weight:500;
					            color:rgba(51,51,51,1);
					        }
					        .tips {
					            font-size:22rpx;
					            font-family:"Arial","Microsoft YaHei","黑体","宋体",SimSun,FangSong,SimHei,KaiTi,sans-serif;
					            font-weight:400;
					            color:rgba(153,153,153,1);
					            margin-top: 5rpx;
								line-height: 35rpx;
					        }
					    }
				}
			}
		}
</style>
 
